<template>
	<view class="container">
		<JxNavbar navType='title' title='用户信息' />

		<div class="avatar">
			<button class="avatar-btn uv-reset-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :src="userInfo['avatar']" mode="aspectFill"></image>
				<text>上传/修改</text>
			</button>
		</div>

		<div class="jx-cell">
			<div class="jx-cell-box">
				<div class="cell-item uv-border-bottom" @click="openNickname">
					<text class="label">昵称</text>
					<div class="right">
						<text>{{ userInfo['nickname'] }}</text>
						<i class="iconfont icon-right"></i>
					</div>
				</div>
				<div class="cell-item uv-border-bottom">
					<text class="label">手机号码</text>
					<button class="uv-reset-button right" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber">
						<text v-if="userInfo['mobile']">{{ userInfo['mobile'] }}</text>
						<text v-else>绑定手机号码</text>
						<i class="iconfont icon-right"></i>
					</button>
				</div>
				<div class="cell-item uv-border-bottom" @click="toProtocol('privacy')">
					<text class="label">隐私政策</text>
					<div class="right">
						<i class="iconfont icon-right"></i>
					</div>
				</div>
				<div class="cell-item" @click="toProtocol('user')">
					<text class="label">用户协议</text>
					<div class="item-box right">
						<i class="iconfont icon-right"></i>
					</div>
				</div>
			</div>
		</div>

		<jx-input-popup ref='inputPopupRef' type='nickname' title='新昵称' @confirm='nicknameConfirm' />
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import file from '@/utils/file/index.js'
	import users from '@/api/users/index.js'
	import tools from '@/utils/tools/index.js'
	import { useUserStore } from '@/store/user.js';
	import JxNavbar from '@/components/navbar/index.vue'

	const test = uni.$uv.test;

	const userStore = useUserStore()
	const userInfo = computed(() => userStore.userInfo);

	const inputPopupRef = ref(null);

	async function onChooseAvatar({ detail }) {
		tools.loading();
		const { avatarUrl: path } = detail;
		const response = await file.uploadFile(path);
		if (response['code'] === 200) {
			const updateResult = await users.update({ avatar: response['data']['path'] });
			if (updateResult['code'] !== 200) return '';
			userStore.init();
			tools.toast({ title: '更新成功', icon: 'success', });
		}

		uni.hideLoading();
	}

	function openNickname() {
		inputPopupRef.value.open(userInfo['value']['nickname']);
	}

	async function nicknameConfirm(val) {
		const checkNickname = test.rangeLength(val, [2, 16]);
		if (!checkNickname) return tools.toast({ title: '请输入2到16位昵称' });

		tools.loading();
		const response = await users.update({ nickname: val })
		uni.hideLoading();
		if (response['code'] === 200) {
			userStore.init();
			tools.toast({ title: '更新成功', icon: 'success', })
		}
	}

	function toProtocol(type) {
		uni.navigateTo({
			url: '/pages/sub/my/protocol/index?type=' + type
		})
	}

	async function bindPhoneNumber(e) {
		const mobileCode = e.detail.code;
		if (!mobileCode) return;
		tools.loading();
		const codeResult = await tools.getLoginCode();
		const response = await users.wx_bind_phone_number({ loginCode: codeResult['data'], mobileCode });
		uni.hideLoading();
		if (response['code'] === 200) {
			userStore.init()
			tools.toast({
				title: '绑定成功',
				icon: 'success',
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: $uv-bg-color;

		.avatar {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.avatar-btn {
				position: relative;
				box-shadow: 0 0 11px rgba(0, 0, 0, .4);
				margin-top: 50rpx;
				border-radius: 50%;
				overflow: initial;

				image {
					border-radius: 50%;
					display: block;
					height: 200rpx;
					width: 200rpx;
				}

				text {
					background-color: $uv-warning;
					border-radius: 8px;
					bottom: 0rpx;
					color: #fff;
					font-size: 24rpx;
					height: 36rpx;
					left: 50%;
					line-height: 34rpx;
					position: absolute;
					text-align: center;
					transform: translate(-50%);
					width: 120rpx;
				}
			}
		}

		.jx-cell {
			margin-top: 50rpx;

			.jx-cell-box {
				box-shadow: 0 0 6px rgba(0, 0, 0, .12);
			}
		}

		.login-out {
			display: block;
			width: 85%;
			height: 95rpx;
			line-height: 95rpx;
			margin: 100rpx auto 0;
			font-size: 32rpx;
			letter-spacing: 2px;
			border-radius: 50px;
			background: #fff;
			color: $uv-error;
			text-align: center;
			box-shadow: 0 0 6px rgba(0, 0, 0, .12);
		}
	}
</style>